<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=833386
-->
<head>
  <meta charset='utf-8'>
  <title>Test for Bug 833386 - TextTrackList</title>
  <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
SimpleTest.waitForExplicitFinish();
SpecialPowers.pushPrefEnv({"set": [["media.webvtt.regions.enabled", true]]},
  function() {
    var video = document.createElement("video");

    isnot(video.textTracks, undefined, "HTMLMediaElement::TextTrack() property should be available.")

    var trackList = video.textTracks;
    is(trackList.length, 0, "Length should be 0.");

    ok(typeof video.addTextTrack == "function", "HTMLMediaElement::AddTextTrack() function should be available.")
    video.addTextTrack("subtitles", "third", "en-CA");
    is(trackList.length, 1, "Length should be 1.");

    var textTrack = video.textTracks[0];
    is(textTrack.label, "third", "Label should be set to third.");
    is(textTrack.language, "en-CA", "Language should be en-CA.");
    is(textTrack.kind, "subtitles", "Default kind should be subtitles.");
    is(textTrack.mode, "hidden", "Default mode should be hidden.");

    // Mode should not allow a bogus value.
    textTrack.mode = 'bogus';
    is(textTrack.mode, 'hidden', "Mode should be not allow a bogus value.");

    // Should allow all these values for mode.
    checkMode("showing", "Mode should allow \"showing\"");
    checkMode("disabled", "Mode should allow \"disabled\"");
    checkMode("hidden", "Mode should allow \"hidden\"");

    // All below are read-only properties and so should not allow setting.
    textTrack.label = "French subtitles";
    is(textTrack.label, "third", "Label is read-only so should still be \"label\".");

    textTrack.language = "en";
    is(textTrack.language, "en-CA", "Language is read-only so should still be \"en-CA\".");

    textTrack.kind = "captions";
    is(textTrack.kind, "subtitles", "Kind is read-only so should still be \"subtitles\"");

    function checkMode(value, message) {
      textTrack.mode = value;
      is(textTrack.mode, value, message);
    }

    // Insert some tracks in an order that is not sorted, we will test if they
    // are sorted later.
    var trackOne = document.createElement("track");
    trackOne.label = "first";
    trackOne.src = "basic.vtt";
    trackOne.default = true;
    trackOne.id = "2";
    video.appendChild(trackOne);

    video.addTextTrack("subtitles", "fourth", "en-CA");

    var trackTwo = document.createElement("track");
    trackTwo.label = "second";
    trackTwo.src = "basic.vtt";
    trackTwo.default = true;
    video.appendChild(trackTwo);

    video.src = "seek.webm";
    video.preload = "metadata";

    document.getElementById("content").appendChild(video);

    video.addEventListener("loadedmetadata", function run_tests() {
      // Re-que run_tests() at the end of the event loop until the track
      // element has loaded its data.
      if (trackOne.readyState == 1 || trackTwo.readyState == 1) {
        setTimeout(run_tests, 0);
        return;
      }
      is(trackOne.readyState, 2, "First Track::ReadyState should be set to LOADED.");
      is(trackTwo.readyState, 2, "Second Track::ReadyState should be set to LOADED.");

      // We're testing two things here, firstly that tracks created from a track
      // element have a default mode 'disabled' and tracks created with the
      // 'addTextTrack' method have a default mode of 'hidden'.
      // Secondly we're testing that the tracks are sorted properly.
      // For the tracks to be sorted the first two tracks, added through a
      // TrackElement, must occupy the first two indexes in their TrackElement
      // tree order. The second two tracks, added through the 'addTextTrack'
      // method, will occupy the last two indexes in the order that they were
      // added in.
      var trackData = [
        { label: "first", mode: "showing", id: "2" },
        { label: "second", mode: "disabled", id: "" },
        { label: "third", mode: "hidden", id: "" },
        { label: "fourth", mode: "hidden", id: "" }
      ];
      is(video.textTracks.length, trackData.length, "TextTracks length should be " + trackData.length);
      for (var i = 0; i < trackData.length; i++) {
        var track = video.textTracks[i];
        isnot(track, null, "Video should have a text track at index " + i);
        var info = trackData[i];
        for (var key in info) {
          is(track[key], info[key], "Track at index " + i + " should have a '" + key + "'' property " +
                                    "with a value of '" + info[key] + "'.");
        }
      }
      SimpleTest.finish();
    });
});
</script>
</pre>
</body>
</html>
